<template>
  <div>
    <!--    head-->
    <!--    空骨架-->
    <template>
      <el-skeleton :animated="true"
                   :throttle="500"
                   :loading="loading"
                   :rows="7"/>
    </template>
    <div v-if="!loading">
      <el-descriptions title="合同申请详情" :column="2" border>

        <el-descriptions-item label="合同申请编号">{{ contractApply.contAppNum }}</el-descriptions-item>
        <el-descriptions-item label="报价份数">{{ contractApply.statQuote }}</el-descriptions-item>
        <el-descriptions-item label="最高报价（元）">{{ contractApply.topQuote }}</el-descriptions-item>
        <el-descriptions-item label="最低报价（元）">
          {{ contractApply.lowQuote }}
        </el-descriptions-item>
      </el-descriptions>
      <div>
        <!--      <div class="materialName">-->
        <!--        {{ enquireDetail.materialName }}-->
        <!--      </div>-->
        <!--    报价供应商  表格开始-->

        <el-table
          :data="contractApply.contractDetails"
          style="width: 100%">


          <el-table-column
            prop="factory"
            label="供应商"
            width="180">
          </el-table-column>
          <el-table-column
            prop="materialName"
            label="供应商"
            width="180">
          </el-table-column>
          <el-table-column
            prop="amount"
            label="数量"
            width="180">
          </el-table-column>
          <el-table-column
            prop="unitPrice"
            label="单价（元/含税）">
          </el-table-column>
          <el-table-column
            prop="mixPrice"
            label="运杂费（元）">
          </el-table-column>
          <el-table-column
            prop="otherPrice"
            label="其它费用（元）">
          </el-table-column>
          <el-table-column
            prop="sumPrice"
            label="总计（元）">
          </el-table-column>


          <el-table-column
            prop="endDate"
            label="结束交货期">
          </el-table-column>
          <el-table-column
            prop="wrapRequire"
            label="包装需求">
          </el-table-column>

          <el-table-column
            prop="mode"
            label="运输">
          </el-table-column>


        </el-table>
        <!--    报价供应商  表格结束-->


      </div>
      <!--    底部报价-->
      <el-descriptions :column="2" border>

        <el-descriptions-item label="总金额（元）">
          {{ contractApply.allSumPrice }}
        </el-descriptions-item>
        <el-descriptions-item label="备注">
          {{ contractApply.remark }}

        </el-descriptions-item>
      </el-descriptions>


    </div>
  </div>
</template>

<script>
import quote from "@/views/quote/index.vue";
import {cloneObj} from "@/utils";
import qs from 'qs'
export default {
  props:['parent_id'],
  data() {
    return {
      id: '',
      loading: true,
      "contractApply": {
        "id": null,
        "contAppNum": null,
        "supplierNum": null,
        "statQuote": null,
        "topQuote": null,
        "lowQuote": null,
        "allSumPrice": null,
        "remark": null,
        "authorId": null,
        "author": null,
        "status": "未确认",
        "contractDetails": []
      },

    }
  },
  mounted() {
    let id = this.parent_id;
    this.id = id
    this.getData()

  },
  methods: {
    getData() {
      this.$http({
        url: this.$http.adornUrl(`purchase/contractapply/info/${this.id}`),
        method: 'get',

      }).then((data) => {
        this.loading = false
        this.contractApply = data.contractApply
      })
    },
    //getdataList结束
    //TODO 下拉框选择


    back() {
      this.$router.go(-1)
    },
    // 底部按钮



  },


}
</script>

<style lang="scss" scoped>
.head {

}

::v-deep .el-descriptions-item__cell.el-descriptions-item__label.is-bordered-label {
  width: 150px
}

.materialName {
  font-weight: bold;
  font-size: 22px;
  margin: 10px 0;
  text-align: center;


}

::v-deep .el-descriptions__title {
  font-size: 25px;
  margin-right: 10px;
}

.bottom {
  //margin-top: 20px;
  margin: 20px;
  text-align: right;
}

.placeholder-tab {
  width: 10px;
}

//::v-deep .cell{
//  text-align: center;
//}

//elementui row style
.grid-content {
  line-height: 36px;
  border-radius: 4px;
  min-height: 36px;
  text-align: center;
}

.el-row {
  margin-bottom: 5px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}


.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
